<template>
  <div class="devicestatus">
    <!-- 搜索 -->
    <div class="form_search">
      <el-form :model="formR" @submit.native.prevent>
        <el-input v-model="formR.imei" placeholder="在此输入IMEI编号进行搜索" clearable></el-input>
      </el-form>
      <el-button type="primary"
       slot="append" class="dev_search" @click="dev_search">搜索</el-button>
    </div>
    <!-- 筛选 -->
    <search @search_data="search_data"></search>
    <!-- 表单列表 -->
    <el-table :data="listData" stripe :header-cell-style="getRowClass" v-loading="loading">
      <el-table-column prop="num" label="序号" min-width="50%"></el-table-column>
      <el-table-column prop="devname" label="设备类型" >
        <template slot-scope="scope">
          <div style="display: inline;" v-if="scope.row.devname =='fireplug'">消防栓</div>
          <div style="display: inline;" v-if="scope.row.devname =='scm'">烟感设备</div>
        </template>
      </el-table-column>
      <el-table-column prop="imei" label="设备编号" min-width="110%"></el-table-column>
      <el-table-column prop="fireplugId" label="位置编号"></el-table-column>
      <el-table-column prop="wptime" label="采集时间" min-width="110%"></el-table-column>
      <el-table-column prop="fireAdress" label="设备安装位置" min-width="230%">
        <template slot-scope="scope">
          <span :title="scope.row.fireAdress">{{ scope.row.fireAdress}}</span>
        </template>
      </el-table-column>
      <el-table-column label="警情状态">
        <template slot-scope="scope">
          <!-- (form.devname === 'fireplug') && (form.wpdata ? (+form.wpdata < (form.wplowthd/1000)):1) -->
          <div
            style="display: inline;"
            v-if="scope.row.devname =='fireplug'&&  (scope.row.wpdata > (scope.row.wplowthd/1000))"
          >{{scope.row.wpdata}}MPa水压正常</div>
          <div
            style="display: inline;"
            v-if="(scope.row.devname =='fireplug')&& (scope.row.wpdata ?(scope.row.wpdata < (scope.row.wplowthd/1000)):1)"
          >{{scope.row.wpdata ? scope.row.wpdataMPa水压异常 : '----'}}</div>
          <div
            style="display: inline;"
            v-if=" typeof(scope.row.alert) === 'number'&&scope.row.devname =='scm' &&  scope.row.alarmtype === '无警情'"
          >无警情</div>
          <div
            style="display: inline;"
            v-if="typeof(scope.row.alert) === 'number'&& scope.row.devname == 'scm' &&  scope.row.alarmtype !== '无警情' "
          >烟感报警</div>
           <div style="display: inline;" v-if="typeof(scope.row.alert) !== 'number' " >----</div>
        </template>
      </el-table-column>
      <el-table-column  label="信号强度" >
        <template slot-scope="scope">{{scope.row.rsrp ? `${scope.row.rsrp}dBm` : ``}}</template>
      </el-table-column>
      <!--<el-table-column label="设备电量">-->
        <!--<template slot-scope="scope">-->
          <!--<div style="display: inline;" v-if="scope.row.volt ? (scope.row.volt < 10):1">{{scope.row.volt ? '请尽快更换电池' : '&#45;&#45;&#45;&#45;'}}</div>-->
          <!--<div style="display: inline;" v-if="scope.row.volt > 20">电量充足</div>-->
          <!--<div style="display: inline;" v-if="scope.row.volt > 10 &&  scope.row.volt < 20">电量低</div>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column prop="onlineState" label="状态">-->
        <!--<template slot-scope="scope">-->
          <!--<span>{{ scope.row.onlineState==='ONLINE'?'在线':'离线'}}</span>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column prop="alert" label="传感器状态" >-->
        <!--<template slot-scope="scope">-->
          <!--&lt;!&ndash; <span>{{ scope.row.sensor==='传感器正常'?'正常':'异常'}}</span> &ndash;&gt;-->
          <!--<div-->
            <!--style="display: inline;"-->
            <!--v-if="typeof(scope.row.alert) === 'number'&& scope.row.sensor == '传感器正常'"-->
          <!--&gt;正常</div>-->
          <!--<div-->
            <!--style="display: inline;"-->
            <!--v-if="typeof(scope.row.alert) === 'number'&& scope.row.sensor !== '传感器正常'"-->
          <!--&gt;异常</div>-->
           <!--<div-->
            <!--style="display: inline;"-->
            <!--v-if="typeof(scope.row.alert) !== 'number'"-->
          <!--&gt;&#45;&#45;&#45;&#45;</div>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <!--<el-table-column prop="devEquipTime" label="安装时间" min-width="110%"></el-table-column>-->
      <el-table-column prop="alert" label="设备状态">
        <template slot-scope="scope">
          <span
            :style="scope.row.alert === 0 ? scope.row.onlineState==='ONLINE'?'color:#2975FF':'color:#EB3838' :'color:#EB3838'"
          >{{ scope.row.alert === 0 ? scope.row.onlineState==='ONLINE'?'正常':'异常' :'异常' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            title="查看"
            @click="handelSee(scope.row)"
            style="width:0px;padding-left:0"
            v-has-permission="'device_query'"
          >
            <img src="/static/image/device/see.png">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- Form 弹框查看 -->
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="dialogTableVisible"
      :modal-append-to-body="false"
      v-if="dialogTableVisible"
      class="dialog-see"
    >
      <div class="left-box">
        <!-- 进度条 -->
        <div class="facility">
          <div style="height:100%;width:100%;float:right;position: relative;">
            <div
              style="float:left;"
              v-if="(form.devname === 'fireplug') && (form.wpdata ? (+form.wpdata < (form.wplowthd/1000)):1)"

            >
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 27px; color: #999; font-size: 12px;"
              >水压状态异常</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 20%;left: 1%;width: 110px;text-align: center;"
              >
                {{form.wpdata ? form.wpdata : '--'}}
                <span style="font-size:16px; color: #999999;">MPa</span>
              </div>
            </div>
            <div
              style="float:left;"
              v-if="form.devname === 'fireplug'  && +form.wpdata > (form.wplowthd/1000)"

            >
              <img src="/static/image/alarm/on.png">
              <span
                style="position: absolute; top: 44%; left: 7px; color: #999; font-size: 14px;width: 110px;text-align: center;"
              >水压在线</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%; left: 1%;width:110px;text-align:center"
              >
                {{form.wpdata}}
                <span style="font-size:16px; color: #999999;">MPa</span>
              </div>
            </div>
            <div style="float:left;" v-if="typeof(form.alert) === 'number'&&form.devname === 'scm' && form.alarmtype === '无警情'">
              <img src="/static/image/alarm/on.png">
              <span
                style="position: absolute; top: 44%; left: 27px; color: #999; font-size: 12px;"
              >当前警情状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 1%;width: 110px;text-align: center;"
              >无警情</div>
            </div>
            <div style="float:left;" v-if="typeof(form.alert) === 'number'&&form.devname === 'scm' && form.alarmtype !== '无警情'">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 27px; color: #999; font-size: 12px;"
              >当前警情状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 1%;width: 110px;text-align: center;"
              >烟感报警</div>
            </div>
            <div style="float:left;" v-if="typeof(form.alert) !== 'number'">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 27px; color: #999; font-size: 12px;"
              >当前警情状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 1%;width: 110px;text-align: center;"
              >--</div>
            </div>
            <span
              style="position: absolute; top: 80%; left: 34px; color: #999; font-size: 14px;"
            >警情状态</span>

            <div style="float:left;margin-left:70px;" v-if="form.volt < 10">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 30%; color: #999; font-size: 12px;"
              >当前电池状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 27%;width: 110px;text-align: center;"
              >{{form.volt ?'请更换电池' : '----'}}</div>
            </div>
            <div style="float:left;margin-left:70px;" v-if="form.volt >10 && form.volt <20">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 26%; color: #999; font-size: 12px;"
              >当前电池状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 25%;width: 110px;text-align: center;"
              >电量低</div>
            </div>
            <div style="float:left;margin-left:70px;" v-if="form.volt  > 20">
              <img src="/static/image/alarm/on.png">
              <span
                style="position: absolute; top: 44%; left: 28%; color: #999; font-size: 12px;width: 100px;text-align: center;"
              >当前电池状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%; left: 27%;width:120px;text-align:center"
              >电量充足</div>
            </div>
            <span
              style="position: absolute; top: 80%; left: 30%; color: #999; font-size: 14px;"
            >电池状态</span>

            <div style="float:left;margin-left:70px;" v-if="form.onlineState === 'OFFLINE'">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; left: 56%; color: #999; font-size: 12px;"
              >当前在线状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;left: 53%;width: 118px;text-align: center;"
              >离线</div>
            </div>
            <div style="float:left;margin-left:70px;" v-if="form.onlineState === 'ONLINE'">
              <img src="/static/image/alarm/on.png">
              <span
                style="position: absolute; top: 44%; left: 53%; color: #999; font-size: 12px;width: 110px;text-align: center;"
              >当前在线状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%; left: 53%;width:110px;text-align:center"
              >在线</div>
            </div>
            <span
              style="position: absolute; top: 80%; left: 57%; color: #999; font-size: 14px;"
            >在线状态</span>

            <div style="float:left;margin-left:70px;" v-if="typeof(form.alert) === 'number'&& form.sensor !== '传感器正常'">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; right:7.8%; color: #999; font-size: 12px;"
              >当前传感器状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%;width: 127px;text-align: center;"
              >异常</div>
            </div>
            <div style="float:left;margin-left:70px;" v-if="typeof(form.alert) === 'number'&& form.sensor === '传感器正常'">
              <img src="/static/image/alarm/on.png">
              <span
                style="position: absolute; top: 44%; right:6%;color: #999; font-size: 12px;width: 110px;text-align: center;"
              >当前传感器状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%; width:120px;text-align:center"
              >正常</div>
            </div>
            <div style="float:left;margin-left:70px;" v-if="typeof(form.alert) !== 'number'">
              <img src="/static/image/alarm/off.png">
              <span
                style="position: absolute; top: 44%; right:6%;color: #999; font-size: 12px;width: 110px;text-align: center;"
              >当前传感器状态</span>
              <div
                style="position: absolute;font-size: 20px; color: #333; top: 25%; width:120px;text-align:center"
              >--</div>
            </div>
            <span
              style="position: absolute; top: 80%; right:8%; color: #999; font-size: 14px;"
            >传感器状态</span>
          </div>
        </div>
        <div style="border-bottom: 1px dashed #efeaea;margin-top:12px;"></div>

        <div style="width:100%;">
          <div style="margin:30px 0;font-size:16px;color:#333;">设备信息</div>
          <el-form
            :model="form"
            @submit.native.prevent
            label-width="100px"
            style="padding-left:6px;"
          >
            <div style="font-size:14px;color:#333333;height:16px;line-height:16px">
              <span style="width:33%;float:left;">设备编号：{{form.imei}}</span>
              <span style="width:33%;float: left;">所在区域：{{form.areaName}}</span>
              <span style="width:33%;float: left;">负责人姓名：{{form.name}}</span>
            </div>

            <div style="font-size:14px;color:#333333;margin-top:28px;height:16px;line-height:16px">
              <span style="width:33%;float:left;">位置编号：{{form.fireplugId}}</span>
              <span style="width:33%;float:left;">场所名称：{{form.siteName}}</span>
              <span style="width:33%;float:left;">负责人电话：{{form.phone}}</span>
            </div>
            <div style="font-size:14px;color:#333333;margin-top:28px;height:16px;line-height:16px">
              <span style="width:33%;float:left;" v-if="form.devname =='fireplug'">设备类型：消防栓</span>
              <span style="width:33%;float:left;" v-if="form.devname =='scm'">设备类型：烟感设备</span>
              <span
                style="width:33%;float:left;"
                v-if="form.devname =='fireplug'"
              >详细地址：{{form.siteAddress}}</span>
              <span
                style="width:33%;float:left;"
                v-if="form.devname =='scm'"
              >详细地址：{{form.siteAddress}}</span>
            </div>
          </el-form>
        </div>
        <div style="border-bottom: 1px dashed #efeaea;padding:12px 0"></div>

        <!-- 折线 -->
        <div class="line">
          <div v-if="form.devname === 'fireplug' ">
            <span style="font-size:16px;color:#333;float:left;">水压历史信息表</span>
            <!--时间段选择-->
            <time-select
              @change="timeSelectChange"
              style="float:right;z-index: 1;position: relative;"
            ></time-select>
            <!--图表-->
            <div class="chart" id="line" style="margin-top: 20px;"></div>
          </div>

          <div v-if="form.devname === 'scm' ">
            <span style="font-size:16px;color:#333;float:left;margin-top: 30px;">烟感设备历史警情信息</span>
            <!--时间段选择-->
            <time-select @change="timeCardChange" style="float:right;margin-top: 30px;"></time-select>
            <carousel style="float:right;margin-top: 50px;" :message="message"></carousel>
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="pagination">
      <div class="page-left">
        <span>共{{ this.totals}}条数据</span>
        <span>每页:</span>
        <el-input
          placeholder="条数"
          v-model="inputs"
          @blur="enter"
          @keyup.enter.native="enter"
          clearable
        ></el-input>
        <span>条</span>
      </div>
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :page-size="pageSize"
        :total="totals"
        @current-change="handleCurrentChanges"
        id="page"
        :current-page.sync="currentPage"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import Config from "@/config";
import { mapGetters } from "vuex";
import TimeSelect from "@/components/TimeSelect";
import Search from "./Search";
import moment from "moment";
import echarts from "echarts";
// import { regionDataPlus } from 'element-china-area-data'
import { regionDataPlus } from 'static/js/regionData'
import Carousel from './Carousel'
export default {
  name: "DeviceStatus",
  components: {
    TimeSelect,
    Search,
    Carousel
  },
  data() {
    return {
      // 分页
      totals: null,
      currentPage: 1,
      pageSize: 15,
      inputs: 15,
      //列表
      listData: [],
      // loading
      loading: false,
      // 查看
      dialogTableVisible: false,
      // 弹框名称
      title: "",
      //弹框数据
      form: {
        volt: ''
      },
      fireAdress: '',
      // 查询
      formR: {},
      message: [],
      // 定时器
      // IntervalList: null
    };
  },
  methods: {
    // 筛选条件
    search_data(datas) {
      // console.log(datas);
      this.currentPage = 1;
      let data = JSON.parse(JSON.stringify(datas));
      // console.log(data)
      this.loading = true;
      let obj = {}
      switch (data.typestatus) {
        case "消防栓":
          obj.devname = 'fireplug';
          break;
        case "烟感设备":
          obj.devname = 'scm';
          break;
      }
      switch (data.waterstatus) {
        case "水压正常":
          obj.wpStatus = 0;
          obj.devname = 'fireplug';
          break;
        case "水压异常":
          obj.wpStatus = 1;
          obj.devname = 'fireplug';
          break;
        case "烟感报警":
          obj.smokeStatus = 1;
          obj.devname = 'scm';
          break;
        case "无警情":
          obj.smokeStatus = 0;
          obj.devname = 'scm';
          break;
      }
      switch (data.voltstatus) {
        case "电量正常":
          obj.voltStatus = 0;
          break;
        case "电量低":
          obj.voltStatus = 1;
          break;
      }
      switch (data.sensorstatus) {
        case "传感器正常":
          obj.sensorStatus = 0;
          break;
        case "传感器异常":
          obj.sensorStatus = 1;
          break;
      }
      switch (data.linestatus) {
        case "设备在线":
          obj.online_state = "ONLINE";
          break;
        case "设备离线":
          obj.online_state = "OFFLINE";
          break;
      }

      // 城市
      if (data.number.district) {
        obj.site_id = data.number.district
      } else if (data.number.area) {
        obj.district = data.number.area
      } else if (data.number.city) {
        obj.city = data.number.city
      } else if (data.number.province) {
        obj.province = data.number.province
      } else {
        obj.country = data.number.country
      }
      this.obj = JSON.parse(JSON.stringify(obj))
      this.getListData(obj)
    },
    // 表头添加背景颜色
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#f6f6f6";
      } else {
        return "";
      }
    },
    /**
    * 对展示数据进行预处理
    * 注：新增对济源市的处理
    * */
    handleData(item) {
      const province = this.getAreaObj(regionDataPlus, item.province)
      if (item.city === '419000' || item.district === '419001' || item.district === '济源市') {
        item.areaName = `${province.label}济源市`
      } else {
        const city = this.getAreaObj(province.children, item.city)
        const district = item.district ? this.getAreaObj(city.children, item.district) : { label: '' }
        item.areaName = `${province.label}${city.label}${district.label}`
      }
    },
    /**
     * 获取区域信息
     * @param {Array} arr
     * @param {String} value
     * @return {Object} obj
     * */
    getAreaObj(arr, value) {
      let obj = null
      arr.some(item => {
        if (value === item.value) {
          obj = item
          return true
        }
      })
      return obj
    },
    // 列表数据处理
    dispose(res) {
      if (res.content.length) {
        this.totals = res.total;
        res.content.map((item, i) => {
          if (this.currentPage === 1) {
            item.num = i + 1;
          } else {
            item.num = (this.currentPage - 1) * this.pageSize + i + 1;
          }
          // 判断位数 二进制转换
             if (typeof (item.alert) === 'number') {
              let type = item.alert.toString(2).padStart(8, "0").split("").reverse();
              for (var b = 0; b < type.length; b++) {
                if (type[b] === "0") {
                  switch (b) {
                    case 0:
                      item.alarmtype = '无警情'
                      break;
                    case 3:
                      item.sensor = '传感器正常'
                      break;
                  }
                }
              }
            }


          this.handleData(item)
          item.fireAdress = item.areaName + item.siteName + item.siteAddress
          item.devEquipTime = moment(item.devEquipTime).format("YYYY-MM-DD HH:mm:ss");
          item.wptime = item.wptime ? moment(item.wptime).format("YYYY-MM-DD HH:mm:ss") : '----';
        });
        this.listData = res.content;
        this.loading = false;
      } else {
        this.listData = res.content;
        this.totals = 0
        this.loading = false;
      }
    },
    // imei查询
    dev_search() {
      this.currentPage = 1
      this.getListData(this.obj);
    },
    // 获取列表
    getListData(params) {
      this.loading = true;
      // if (this.IntervalList) {
      //   clearInterval(this.IntervalList)
      // }
      //判断权限
      if (this.role[0].sort === 93) {
        params.site_type = 'test'
      } else if (this.role[0].sort !== 100) {
        params.site_type = 'official'
      }
      params.subtype = "collective"
      params.imei = this.formR.imei ? this.formR.imei : undefined
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/data/search?page=${(this.currentPage - 1) * this.pageSize}&size=${this.pageSize}`;
      this.$http.post(url, params).then(res => {
        // console.log(res)
        this.dispose(res);
      });
    },
    // 回车事件
    enter() {
      if (+this.inputs === 0) {
        this.inputs = 15;
      }
      if (Number.isInteger(+this.inputs)) {
        this.pageSize = +this.inputs;
        this.currentPage = 1;
        this.getListData(this.obj);
      } else {
        this.$message({
          message: "请输入整数",
          type: "warning"
        });
      }
    },
    // 分页
    handleCurrentChanges(val) {
      this.getListData(this.obj);

    },
    //查看
    handelSee(data) {
      // console.log(data)
      // 判断位数 二进制转换
      if (typeof (data.alert) === 'number') {
        let type = data.alert.toString(2).padStart(8, "0").split("").reverse();
        for (var b = 0; b < type.length; b++) {
          if (type[b] === "0") {
            switch (b) {
              case 0:
                data.alarmtype = '无警情'
                break;
              case 3:
                data.sensor = '传感器正常'
                break;
            }
          }
        }
      }
      this.form = JSON.parse(JSON.stringify(data));
      // for (var i in data) {
      //   this.form[i] = data[i];
      // }
      this.title = "设备预览";
      if (!this.form.volt) {
        this.form.volt = ''
      }
      // 管理人员
      let url =`${Config.AUTH_URL}/getManagerInfoByDistrictId`
      let param ={
        districtId:data.siteId
      }
      this.$http.get(url, param).then((res) => {
        // console.log(res)
        this.$nextTick(() => {
          this.form.name = res.name
          this.form.phone = res.phone
          this.dialogTableVisible = true;
        })
      }).catch(e => {
        this.dialogTableVisible = true;
      })
    },
    // 折线
    /**
     * 绘制echarts图
     * @param Object {xAxis, series}
     * */
    timeSelectChange(data) {
      // console.log(data)
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/range`;
      let param = {
        imei: this.form.imei,
        start: data.day.start,
        end: data.day.end
      };
      this.$http.get(url, param).then(res => {
        // console.log(res)
        let xAxis = [];
        let series = {
          name: "MPa",
          type: data.name === "week" ? "bar" : "line",
          smooth: false, // 圆滑曲线
          data: [],
          barWidth: 30, // 柱图宽度
          markLine: {
            symbol: "none", // 去掉箭头
            itemStyle: {
              normal: {
                lineStyle: { type: "solid", color: "#F03A3A" },
                label: { formatter: "低压线", show: true, position: "left" }
              }
            },
            data: [
              {
                name: "低压线",
                yAxis: this.form.wplowthd / 1000
              }
            ]
          },
          itemStyle: {
            normal: {
              color: "#4B87FF", // 线条和点颜色
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    // 面积颜色
                    offset: 0,
                    color: "rgb(191, 212, 255)"
                  },
                  {
                    offset: 1,
                    color: "rgb(244, 247, 255)"
                  }
                ])
              }
            }
          }
        };
        let dataZoom = {
          // 缩放条
          show: data.name === "week" ? false : true,
          orient: "horizontal",
          start: 0,
          end: 100,
          backgroundColor: "rgba(0,0,0,0)", // 背景颜色
          dataBackgroundColor: "#eee", // 数据背景颜色
          fillerColor: "rgba(144,197,237,0.2)", // 填充颜色
          handleColor: "rgba(70,130,180,0.8)" // 手柄颜色
        };

        // 通过时间戳返回补0
        let endTime = data.day.end
        let startTime = data.day.start
        let timeArray = res
        let resultArrayData = [];//查询的所有时间数组
        for (let a = startTime; a <= endTime;) {
          resultArrayData.push(a);
          a += 86400000;
        }
        // console.log( resultArrayData );//查询的所有时间数组
        let timeArrayIndex = true;//有没有数据标记
        // let xAxis = [];//数据处理结果
        for (let b = 0; b < resultArrayData.length; b++) {
          for (let c = 0; c < timeArray.length; c++) {
            if (moment(resultArrayData[b]).format('MMMM Do YYYY') == moment(timeArray[c].wptime).format('MMMM Do YYYY')) {
              xAxis.push(this.fmtDate(resultArrayData[b]));
              series.data.push(timeArray[c].wpdata)
              timeArrayIndex = false;
            }
          }
          if (timeArrayIndex) {
            xAxis.push(this.fmtDate(resultArrayData[b]));
            series.data.push(0)
          }
          timeArrayIndex = true;
        }
        this.drawChart(xAxis, series, dataZoom);
      }).catch(e => {
        console.log(e)
      })
    },
    // 卡片
    timeCardChange(data) {
      this.message = []
      // console.log(data.name)
      let params = {}
      // 判断权限 test//神//凡人
      if (this.role[0].sort === 93) {
        params.site_type = 'test'
      } else if (this.role[0].sort !== 100) {
        params.site_type = 'official'
      }
      if (data.name === 'week') params.range = '7'
      if (data.name === 'month') params.range = '30'
      if (data.name === 'halfYear') params.range = '180'
      if (data.name === 'year') params.range = '365'
      params.imei = this.form.imei
      params.devname = this.form.devname
      params.sort = 'ts desc'
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/alarm/search?page=${(this.currentPage - 1) * this.pageSize}&size=${this.pageSize}`
      this.$http.post(url, params).then((res) => {
        console.log(res)
        let arr = []
        if (!res.content.length) return
        res.content.map((item) => {
          if (item.stopTime) {
            item.stoptime = moment(item.stopTime).format("YYYY-MM-DD HH:mm:ss")
            arr.push({ stoptime: moment(item.stopTime).format("YYYY-MM-DD HH:mm:ss") })
          }
          if (item.startTime) {
            item.starttime = moment(item.startTime).format("YYYY-MM-DD HH:mm:ss")
            arr.push({ starttime: moment(item.startTime).format("YYYY-MM-DD HH:mm:ss") })
          }
        })
        this.message = arr
      })
    },
    // 时间处理函数
    fmtDate(time) {
      let date = new Date(time);
      let y = 1900 + date.getYear();
      let m = "0" + (date.getMonth() + 1);
      let d = "0" + date.getDate();
      return y + "-" + m.substring(m.length - 2, m.length) + "-" + d.substring(d.length - 2, d.length);
    },
    /**
     * 绘制echarts图
     * @param Object {xAxis, series}
     * */
    drawChart(xAxis, series, dataZoom) {
      // 基于准备好的dom，初始化echarts实例
      const dom = document.getElementById("line")
      if (!dom) {
        return
      }
      this.chart = this.$echarts.init(dom);
      // 绘制图表
      this.chart.setOption({
        grid: {
          y: 10,
          x2: 10,
          borderWidth: 1
        },
        title: {
          text: ""
        },
        tooltip: {},
        // 区域缩放控制器
        dataZoom: dataZoom,
        xAxis: {
          data: xAxis,
          axisLine: {
            lineStyle: {
              color: "#E1E1E1"
            }
          }
        },
        axisLabel: {
          color: "#999"
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} MPa"
          },
          axisLine: {
            lineStyle: {
              color: "#E1E1E1"
            }
          },
          splitLine: {
            lineStyle: {
              color: "#E1E1E1",
              type: "dashed"
            }
          }
        },
        series: series
      });
    }
  },
  destroyed() {
    // clearInterval(this.IntervalList)
  },
  created() {
    // this.getListData();
  },
  computed: {
    ...mapGetters("user", {
      module: "dealedModule",
      user: "getUser",
      role: "getRole",
      district: "getDistrict"
    })
  }
};
</script>

<style lang='scss' >
@import "../../../../../static/scss/common";
@import "../../../../../static/scss/design-list.scss";

.devicestatus {
  // 搜索
  .form_search {
    width: 100%;
    height: 42px;
    margin: 4px 0 16px;
    .el-form {
      width: 500px;
      float: left;
      height: 42px;
      line-height: 42px;
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      border: 0;
      .el-input {
        .el-input__inner {
          height: 42px;
          border-radius: 0;
          border: 0;
          line-height: 42px;
        }
        .el-input__inner:hover {
          border-color: 0;
        }
      }
    }
    .dev_search {
      width: 80px;
      height: 42px;
      background: rgba(235, 56, 56, 1);
      box-shadow: 5px 5px 0px 0px rgba(34, 34, 34, 0.1);
      padding: 0;
      border-radius: 0;
      font-size: 14px;
    }
  }
  // 查看
  .dialog-see.el-dialog__wrapper {
    .el-dialog {
      width: 800px;
      height: 800px;
      margin-top: auto !important;
      margin: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      .el-dialog__body {
        box-sizing: border-box;
      }
    }
  }
  .dialog-see {
    .left-box {
      float: left;
      width: 775px;
      height: 700px;
      box-sizing: border-box;
      padding-right: 24px;
      // 进度条
      .facility {
        width: 100%;
        height: 173px;
        padding-left: 20px;
        // 左侧表
        // .el-form-item {
        //   height: 38px !important;
        // }
        // .el-form-item__label {
        //   line-height: 20px !important;
        //   color: $gray3;
        // }
        // .el-form-item__content {
        //   line-height: 20px !important;
        // }
        // 右侧svg
        .el-progress-circle {
          width: 170px !important;
          height: 170px !important;
        }
        .el-progress__text {
          font-size: 32px !important;
          color: $gray3 !important;
          top: 45% !important;
        }
      }
      // 折线
      .line {
        width: 100%;
        height: 323px;
        box-sizing: border-box;
        /*图表*/
        .chart {
          flex: 1;
          height: 260px;
        }
      }
    }
  }
  // 分页
  .pagination {
    padding: 32px 0 44px 23px;
    background: #fff;
    .page-left {
      font-size: 12px;
      display: inline-block;
      .el-input--suffix {
        width: 56px;
      }
    }
  }
}
</style>
